<template>
	<view class="pageBox">
		<head-navbar :back="true">
			<view>{{title}}</view>
		</head-navbar>
		<view class="content">
			<view class="top">
				<view class="item">
					<image src="../../../../../static/img/pwdPhone.png" mode="" style="margin-right: 20upx;"></image>
					<input type="number" disabled   placeholder="请输入手机号" placeholder-style="color:#B4B4B4" maxlength="11" v-model="form.phone"/>
				</view>
				<view class="item" style="border: 0;">
					<image src="../../../../../static/img/pwdCode.png" mode="" style="margin-right: 20upx;"></image>
					<input type="text"  placeholder="请输入短信验证码" placeholder-style="color:#B4B4B4" v-model="form.code"/>
					<button type="default" class="codebtn" @click="showtime" v-if="runTime">获取验证码</button>
					<button type="default" class="codebtn dis" v-else>{{ time }} s</button>
				</view>
			</view>
			<!-- 登陆密码 -->
			<view class="bottom" v-if="type == 0">
				<view class="item">
					<view class="left">
						<image src="../../../../../static/img/pwdlock.png" mode="" style="margin-right: 20upx;"></image>
						<input type="text"  placeholder="请输入新的登录密码" placeholder-style="color:#B4B4B4" :password="showPwd" v-model="form.newPwd"/>
					</view>
					<image src="../../../../../static/img/uncheck.png" mode="" class="rightImg" v-if="showPwd" @click="showPwd ? showPwd = false : showPwd = true "></image>
					<image src="../../../../../static/img/checked.png" mode="" class="rightImg" v-else @click="showPwd ? showPwd = false : showPwd = true "></image>
				</view>
				<view class="item">
					<view class="left">
						<image src="../../../../../static/img/pwdlock.png" mode="" style="margin-right: 20upx;"></image>
						<input type="text"   placeholder="请再次输入登录密码" placeholder-style="color:#B4B4B4" :password="showPwdAgain" v-model="form.reNewPwd"/>
					</view>
					<image src="../../../../../static/img/uncheck.png"  class="rightImg"  v-if="showPwdAgain" @click="showPwdAgain ? showPwdAgain = false : showPwdAgain = true "></image>
					<image src="../../../../../static/img/checked.png" class="rightImg" v-else @click="showPwdAgain ? showPwdAgain = false : showPwdAgain = true "></image>
				</view>
			</view>
			
			
			<!-- 交易密码 -->
			<view class="bottom" v-else>
				<view class="item">
					<view class="left">
						<image src="../../../../../static/img/pwdlock.png" mode="" style="margin-right: 20upx;"></image>
						<input type="number" v-model="form.newTradePassword"  placeholder="请输入新的交易密码" placeholder-style="color:#B4B4B4" :password="showPwd"/>
					</view>
					<image src="../../../../../static/img/uncheck.png" mode="" class="rightImg" v-if="showPwd" @click="showPwd ? showPwd = false : showPwd = true "></image>
					<image src="../../../../../static/img/checked.png" mode="" class="rightImg" v-else @click="showPwd ? showPwd = false : showPwd = true "></image>
				</view>
				<view class="item">
					<view class="left">
						<image src="../../../../../static/img/pwdlock.png" mode="" style="margin-right: 20upx;"></image>
						<input type="number" v-model="form.reNewTradePassword"  placeholder="请再次输入交易密码" placeholder-style="color:#B4B4B4" :password="showPwdAgain"/>
					</view>
					<image src="../../../../../static/img/uncheck.png"  class="rightImg"  v-if="showPwdAgain" @click="showPwdAgain ? showPwdAgain = false : showPwdAgain = true "></image>
					<image src="../../../../../static/img/checked.png" class="rightImg" v-else @click="showPwdAgain ? showPwdAgain = false : showPwdAgain = true "></image>
				</view>
			</view>
		</view>
		<view class="comfim" @click="confim()">确定</view>
	</view>
</template>

<script>
	import * as api from '@/api/user/pwd.js';
	export default {
		data() {
			return {
				numberRege:/^\d{6}$/,
				passwordRege:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
				title:'',
				time:60,
				runTime:true,
				showPwd:true,
				showPwdAgain:true,
				type:1,    // 0 登录密码 1 交易密码
				form:{
					phone:this.globalData.userInfo.phone,
					code:'',
					newPwd:'',				//新密码
					reNewPwd:'',			//新确认密码
					newTradePassword:'',	//新交易密码
					reNewTradePassword:''	//新确认交易密码
				}
			}
		},
		onLoad(option){
			option.type == 0  ? this.title = '修改登录密码' : this.title = '修改交易密码';
			this.type = Number(option.type);
			
		},
		methods: {
			/**
			 * 倒计时
			 */
			showtime() {
				var count = 60;
				var that = this;
				that.runTime = false;
				var demo = setInterval(function(){
					if(count > 0) {
						count--;
						that.time = count;
					}else{
						clearInterval(this)
						that.time = 60;
						that.runTime = true;
					}
				},1000)
				that.sendCode();
			},
			confim() {
				if(this.type == 0) {
					this.fixPwd();
				}else{
					this.fixTradePwd();
				}
			},
			async sendCode() {
				try{
					const ret = await api.sendPhoneCode({phone:this.form.phone})
					uni.showToast({title:'发送短信成功',icon:'none'})
				}catch(error){
					this.runTime = true;
					this.time = 60;
				}
			},
			// 修改交易密码
			async fixTradePwd() {
				try{
					let param = this.form;
						delete param.newPwd;
						delete param.reNewPwd;
						if(param.phone == ''){
							this.$tools.toast('手机号不能为空')
							return
						}
						if(param.code == ''){
							this.$tools.toast('验证码不能为空')
							return
						}
						if(param.newTradePassword != param.reNewTradePassword){
							this.$tools.toast('两次输入的交易密码不一致')
							return
						}
						if(param.newTradePassword == ''){
							this.$tools.toast('交易密码不能为空')
							return
						}
						if(!this.numberRege.test(param.newTradePassword)){
							this.$tools.toast('交易密码必须为6位数字')
							return
						}
					const ret = await api.upDateTradePwd(param);
					uni.showToast({
						title:'修改成功',
						icon:'none',
						success:()=>{
							setTimeout(function(){
								uni.navigateBack({
								delta:1
							})
							},1500)
						}
					})
				}catch(error){
				
				}
			},
			// 修改登录密码
			async fixPwd() {
				try{
					let param = this.form;
						delete param.newTradePassword
						delete param.reNewTradePassword
						if(param.phone == ''){
							this.$tools.toast('手机号不能为空')
							return
						}
						if(param.code == ''){
							this.$tools.toast('验证码不能为空')
							return
						}
						if(param.newPwd != param.reNewPwd){
							this.$tools.toast('两次输入的密码不一致')
							return
						}
						if(param.newPwd == ''){
							this.$tools.toast('密码不能为空')
							return
						}
						if(!this.passwordRege.test(param.newPwd)){
							this.$tools.toast('密码必须为6-12位，由数字和字母组成')
							return
						}
					const ret = await api.upDatePwd(param);
					uni.showToast({
						title:'修改成功',
						icon:'none',
						success:()=>{
							setTimeout(function(){
								uni.navigateBack({
								delta:1
							})
							},1500)
						}
					})
				}catch(error){
					
				}
			}
		}
	}
</script>

<style lang="scss">
@import './index.scss';
</style>
